<template>
  <div>
    <!-- <van-icon
      name="arrow-left"
      size="30"
      style="line-height: 50px; float: left"
    />
    <van-search
      placeholder="请输入搜索关键词"
      right-icon=""
      style="float: left; width: 80%"
    /> -->

    <van-row>
      <van-col span="6"
        ><van-sidebar v-model="active">
          <van-sidebar-item
            v-for="(v, i) in list"
            :key="i"
            :title="v.cat_name"
          /> </van-sidebar
      ></van-col>
      <van-col span="18">
        <div v-for="(v, i) in list[active]?.children" :key="i">
          <div>{{ v.cat_name }}</div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="(val, index) in v.children" :key="index">
              <van-image :src="val.cat_icon" @click="onsearch(val.cat_name)" />
              <div>{{ val.cat_name }}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { categoriesApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const active = ref(0);
const list = ref([]);

const catFun = () => {
  categoriesApi().then((res) => {
    list.value = res.data.message;
  });
};
catFun();

const onsearch=(name)=>{
    router.push({path:'/search',query:{name:name}})
}
</script>

<style lang="scss" scoped></style>
